<div class="middle surface-shaded">
  <origin-modal-popup class="projects-list-create-popup" shown="newProjectPanelShown" modal-title="Create Project" on-close="closeNewProjectPanel" reference-element="popupElement">
    <create-project is-dialog="true" redirect-action="onNewProject" on-cancel="closeNewProjectPanel"></create-project>
  </origin-modal-popup>
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div ng-if="alerts" class="alerts">
            <alerts alerts="alerts"></alerts>
          </div>

          <div ng-if="!showGetStarted">
            <div ng-if="loading" class="empty-state-message">
              <h2 class="text-center">Loading...</h2>
            </div>
            <div ng-if="!loading">
              <div class="projects-header">
                <div class="projects-bar">
                  <h1>My Projects</h1>
                  <div class="projects-options">
                    <div class="projects-add" ng-if="canCreate">
                      <button ng-click="createProject($event)" class="btn btn-primary">
                        <span class="fa fa-plus" aria-hidden="true"></span>
                        <span class="icon-button-text">Create Project</span>
                      </button>
                    </div>
                    <div class="projects-search">
                      <form role="form" class="search-pf has-button">
                        <div class="form-group has-clear">
                          <div class="search-pf-input-group">
                            <label for="search-projects" class="sr-only">Filter by keyword</label>
                            <input
                              type="search"
                              class="form-control"
                              placeholder="Filter by keyword"
                              id="search-projects"
                              ng-model="search.text">
                            <button
                              type="button"
                              class="clear"
                              aria-hidden="true"
                              ng-if="search.text"
                              ng-click="search.text = ''">
                              <span class="pficon pficon-close"></span>
                            </button>
                          </div>
                        </div>
                      </form>
                      <span class="vertical-divider"></span>
                      <span class="projects-sort-label">Sort by</span>
                      <div class="projects-sort">
                        <pf-sort config="sortConfig" class="sort-controls"></pf-sort>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div ng-if="isProjectListIncomplete">
                <div class="alert alert-warning">
                  <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
                  <span class="sr-only">Warning:</span>
                  The complete list of your projects could not be loaded.
                  Type a project name to go to that project.
                </div>
                <form>
                  <div class="form-group">
                    <label for="typed-project-name">Project Name</label>
                    <div class="input-group">
                      <input
                        class="form-control"
                        type="text"
                        id="typed-project-name"
                        required
                        minlength="2"
                        ng-model="input.typedProjectName"
                        autocorrect="off"
                        autocapitalize="none"
                        spellcheck="false">
                      <span class="input-group-btn">
                        <button class="btn btn-default"
                                type="submit"
                                ng-disabled="!input.typedProjectName"
                                ng-click="goToProject(input.typedProjectName)">
                          <i class="fa fa-arrow-right" aria-hidden="true"></i>
                          <span class="sr-only">Go to Project</span>
                        </button>
                      </span>
                    </div>
                  </div>
                </form>
              </div>
              <div ng-if="!projects.length && !isProjectListIncomplete" class="h3">
                The current filter is hiding all projects.
                <a href="" ng-click="search.text = ''" role="button" class="nowrap">Clear Filter</a>
              </div>
              <div class="list-pf list-group projects-list">
                <div ng-repeat="project in projects | limitTo: limitListTo track by (project | uid)" class="list-pf-item list-group-item project-info tile-click">
                  <div class="list-pf-container">
                    <div class="list-pf-content list-pf-content-flex">
                      <div class="list-pf-content-wrapper">
                        <div class="list-pf-main-content">
                          <div class="list-pf-title project-name-item">
                              <h2 class="h3">
                                <a class="tile-target" ng-href="project/{{project.metadata.name}}" title="{{project | displayName}}">
                                  <span ng-bind-html="project | displayName | highlightKeywords : keywords"></span>
                                </a>
                                <span ng-if="project.status.phase != 'Active'"
                                      data-toggle="tooltip"
                                      title="This project has been marked for deletion."
                                      class="pficon pficon-warning-triangle-o"></span>
                              </h2>
                              <small class="project-date">
                                <span ng-if="project | displayName : true"><span ng-bind-html="project.metadata.name | highlightKeywords : keywords"></span> &ndash;</span>
                                created
                                <span ng-if="project | annotation : 'openshift.io/requester'">by <span ng-bind-html="project | annotation : 'openshift.io/requester' | highlightKeywords : keywords"></span></span>
                                <span am-time-ago="project.metadata.creationTimestamp"></span>
                              </small>
                          </div>
                          <div class="list-pf-description project-description">
                            <truncate-long-text ng-if="!keywords.length" content="project | description" limit="265" newline-limit="10" use-word-boundary="true"></truncate-long-text>
                            <span class="highlighted-content" ng-if="keywords.length" ng-bind-html="project | description | truncate : 1000 | highlightKeywords : keywords"></span>
                          </div>
                        </div>
                      </div>
                      <div class="list-pf-actions" ng-if="project.status.phase == 'Active'">
                        <div uib-dropdown class="dropdown pull-right dropdown-kebab-pf">
                          <button uib-dropdown-toggle class="btn btn-link dropdown-toggle"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span></button>
                          <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
                            <li role="menuitem">
                              <a ng-href="project/{{project.metadata.name}}/membership">
                                View Membership
                              </a>
                            </li>
                            <li role="menuitem">
                              <a href="" ng-click="editProject(project)">
                                Edit Project
                              </a>
                            </li>
                            <li role="menuitem">
                              <delete-project
                                label="Delete Project"
                                project="project"
                                type-name-to-confirm="true"
                                stay-on-current-page="true"
                                success="onDeleteProject">
                              </delete-project>
                            </li>
                          </ul>
                        </div>

                      </div>
                      <origin-modal-popup shown="editProjectPanelShown && editingProject === project"
                                          ng-class="{'with-description': (project | description | size)}"
                                          modal-title="Edit Project" on-close="closeEditProjectPanel">
                        <edit-project project="project" is-dialog="true" redirect-action="onEditProject" on-cancel="closeEditProjectPanel"></edit-project>
                      </origin-modal-popup>
                    </div>
                  </div>
                </div>
              </div>
              <p ng-if="projects.length > limitListTo">
                Only the first {{limitListTo}} projects are displayed.
                Filter by keyword or change sort options to see other
                projects.
              </p>
              <p class="projects-instructions" ng-if="canCreate === false" ng-include="'views/_cannot-create-project.html'"></p>
            </div>
          </div>

          <div ng-if="showGetStarted">
            <div class="empty-state-message empty-state-full-page text-center">
              <h1>Welcome to OpenShift.</h1>
              <p>
                OpenShift helps you quickly develop, host, and scale applications.<br>
                <span ng-if="canCreate">Create a project for your application.</span>
              </p>
              <div>
                <button ng-click="createProject($event)" class="btn btn-lg btn-primary">
                  <span class="fa fa-plus" aria-hidden="true"></span>
                  <span class="icon-button-text">Create Project</span>
                </button>
              </div>
              <p>To learn more, visit the OpenShift <a target="_blank" ng-href="{{'' | helpLink}}">documentation</a>.</p>
              <p class="projects-instructions" ng-if="canCreate === false" ng-include="'views/_cannot-create-project.html'"></p>
            </div>
          </div>

        </div><!-- /col -->
      </div><!-- /row -->
    </div><!-- /container-fluid -->
  </div><!-- /middle-content -->
</div><!-- /middle -->
